<template>
	<el-container>
		<el-header>
			<el-form :inline="true">
				<el-form-item label="AppId">
					<el-input
						v-model="search.appId"
						placeholder="AppId"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item label="Secret">
					<el-input
						v-model="search.secret"
						placeholder="Secret"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item label="关键字">
					<el-input
						v-model="search.key"
						placeholder="关键字"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item label="DNS">
					<el-select v-model="search.endpoint" placeholder="请选择">
						<el-option
							v-for="item in endpointList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-header>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"
					>转存数据库</el-button
				>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="upsearch"
						>搜索</el-button
					>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="projectId"
				@selection-change="selectionChange"
				:params="search"
				stripe
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column
					label="#"
					type="index"
					width="50"
				></el-table-column>
				<el-table-column
					label="域名"
					prop="domainName"
				></el-table-column>
				<el-table-column label="DNS" prop="dnsServers">
					<template #default="scope">
						<div
							v-for="(item, index) in scope.row.dnsServers
								.dnsServer"
							:key="index"
						>
							{{ item }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					prop="createTime"
				></el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="right"
					width="170"
				>
					<template #default="scope">
						<el-button-group>
							<el-button
								text
								type="primary"
								size="small"
								@click="table_show(scope.row, scope.$index)"
								>查看解析</el-button
							>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
</template>

<script>
import saveDialog from "./save";

export default {
	name: "projectManage",
	components: {
		saveDialog,
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			endpointList: [
				{ label: "杭州", value: "alidns.cn-hangzhou.aliyuncs.com" },
				{ label: "青岛", value: "dns.aliyuncs.com" },
			],
			apiObj: this.$API.domain.page,
			selection: [],
			search: {
				appId: "LTAIBfs5tPUlHbzx",
				secret: "7E2OqRKopbhWEg7wINX5ONYgMytCjk",
				key: "",
				endpoint: "",
			},
		};
	},
	methods: {
		//添加
		add() {
			this.$API.domain.add.post(this.search);
			this.$message.success(
				"正在转存数据，转存成功之后会有通知，请耐心等待"
			);
		},
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.search.domainName = row.domainName;
				this.$refs.saveDialog.open("show").setData(this.search);
			});
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search);
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
	},
};
</script>

<style></style>
